<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<body>
    <div class="app-home dpflex fdcolumn">
        <div class="main">
            <!-- 轮播图 -->
            <div class="main-banner swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><a href=""><img src="../imgs/course-img01.jpg" alt=""></a></div>
                    <div class="swiper-slide"><a href=""><img src="../imgs/course-img02.png" alt=""></a></div>
                    <div class="swiper-slide"><a href=""><img src="../imgs/course-img03.jpg" alt=""></a></div>
                    <div class="swiper-slide"><a href=""><img src="../imgs/course-img04.jpg" alt=""></a></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
            <!-- 内容 -->
            <div class="main-body">
                <div class="main-body-one">
                    <div class="mr10">
                        <a href="#">
                            <img src="../imgs/index-card-rank.png" alt="">
                            <h3 class="title">今日排名</h3>
                            <span class="ranking">9</span>
                        </a>
                    </div>
                    <div>
                        <h3>累计打卡<span class="day">23</span>天</h3>
                        <span href="#" class="clock-in">今日打卡</span>
                    </div>
                </div>
                <div class="main-body-two">
                    <div class="mr10 dpflex">
                        <a href="#">
                            <h3>运动数据</h3>
                        </a>
                    </div>
                    <div class="dpflex">
                        <a href="#" class="colro-004E73">
                            <h3>累计运动徽章</h3>
                            <p><span class="num">3</span>枚</p>
                        </a>
                    </div>
                </div>
                <div class="main-body-three">
                    <a href="./training-course.html">
                        <h3>课程训练</h3>
                    </a>
                </div>
                <div class="main-body-four">
                    <a href="./countdown.html">
                        <h3>户外跑步</h3>
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>